<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>
<body>
<div class="x-nav" style="height: 43px">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:2.5px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:35px"></i></a>
</div>
<table style="margin-left: 10px" class="layui-hide" id="text" lay-filter="demo"></table>
</body>
<script id="button" type="text/html">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">确定</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script id="toolbarDemo" type="text/html">
    <div className="layui-btn-container" style="font-size: 20px;font-weight: bold;width: 500px;margin-left: 560px;" id="divLeft">
        需求计划查询
    </div>
    <div class="demoTable" style="margin: auto;margin-top: 15px">
        物资编码:
        <div class="layui-inline">
            <input class="layui-input" name="materialCode" id="materialCode" autocomplete="off">
        </div>
        物资名称:
        <div class="layui-inline">
            <input class="layui-input" name="materialName" id="materialName" autocomplete="off">
        </div>
        状态:
        <div class="layui-inline">
            <select name="progress" id="progress" lay-filter="ReportType" lay-verify="required">
                <option value="">全部</option>
                <option value="未确定">未确定</option>
                <option value="确定">确定</option>
            </select>
        </div>
        <button class="layui-btn" data-type="reload" onclick="buttonSS()" id="search">搜索</button>
    </div>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.confirm('确定执行该操作吗?', function (index) {
                    //根据需要修改下面自己查看的操作即可。
                    $.ajax({
                        url: "/orders/Que",
                        data: {"id": data.id},
                        type: "GET",
                        success: function (result) {
                            if ($.trim(result) == "true") {
                                table.reload('tableAll');
                                layer.close(index);
                            } else {
                                layer.alert("修改失败！");
                                layer.close(index);
                            }
                        }
                    });
                });
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //根据需要修改下面自己查看的操作即可。
                    $.ajax({
                        url: "/orders/Del",
                        data: {"id": data.id},
                        type: "GET",
                        success: function (result) {
                            if ($.trim(result) == "true") {
                                table.reload('tableAll');
                                layer.close(index);
                            } else {
                                layer.alert("删除失败！");
                                layer.close(index);
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                $.ajax({
                    url: "/orders/SelById",
                    data: {"id": data.id},
                    type: "GET",
                    success: function (result) {
                        layer.open({
                            type: 1 //Page 层类型
                            , area: ['600px', '327px']
                            , title: '需求计划'+result.id
                            , shade: 0.6 //遮罩透明度
                            , maxmin: true //允许全屏最小化
                            , anim: 0 //0-6的动画形式，-1不开启
                            , content: "\n" +
                                "\t\t  <table class=\"layui-table\">\n" +
                                "\t\t    <colgroup>\n" +
                                "\t\t      <col width=\"150\">\n" +
                                "\t\t      <col width=\"150\">\n" +
                                "\t\t      <col width=\"200\">\n" +
                                "\t\t      <col>\n" +
                                "\t\t    </colgroup>\n" +
                                "\t\t    <tbody>\n" +
                                "\t\t      <tr>\n" +
                                "\t\t        <td style='background-color: #F2F2F2;font-weight: bold;'>需求计划编号</td>\n" +
                                "\t\t        <td>"+result.orderNum+"</td>\n" +
                                "\t\t        <td style='background-color: #F2F2F2;font-weight: bold;'>产品编码</td>\n" +
                                "\t\t        <td>"+result.materialCode+"</td>\n" +
                                "\t\t      </tr>\n" +
                                "\t\t      <tr>\n" +
                                "\t\t        <td style='background-color: #F2F2F2;font-weight: bold;'>产品名称</td>\n" +
                                "\t\t        <td>"+result.materialName+"</td>\n" +
                                "\t\t        <td style='background-color: #F2F2F2;font-weight: bold;'>数量</td>\n" +
                                "\t\t        <td>"+result.amount+"</td>\n" +
                                "\t\t      </tr>\n" +
                                "\t\t      <tr>\n" +
                                "\t\t        <td style='background-color: #F2F2F2;font-weight: bold;'>计量单位</td>\n" +
                                "\t\t        <td>"+result.measureUnit+"</td>\n" +
                                "\t\t        <td style='background-color: #F2F2F2;font-weight: bold;'>预算单价(元)</td>\n" +
                                "\t\t        <td>"+result.unitPrice+"</td>\n" +
                                "\t\t      </tr>\n" +
                                "\t\t      <tr>\n" +
                                "\t\t        <td style='background-color: #F2F2F2;font-weight: bold;'>开始交货期</td>\n" +
                                "\t\t        <td>"+result.startDate+"</td>\n" +
                                "\t\t        <td style='background-color: #F2F2F2;font-weight: bold;'>业务员</td>\n" +
                                "\t\t        <td>"+result.author+"</td>\n" +
                                "\t\t      </tr>\n" +
                                "\t\t\t  <tr>\n" +
                                "\t\t\t    <td style='background-color: #F2F2F2;font-weight: bold;'>电子邮件</td>\n" +
                                "\t\t\t    <td>"+result.email+"</td>\n" +
                                "\t\t\t    <td style='background-color: #F2F2F2;font-weight: bold;'>联系电话</td>\n" +
                                "\t\t\t    <td>"+result.phone+"</td>\n" +
                                "\t\t\t  </tr>\n" +
                                "\t\t\t  <tr>\n" +
                                "\t\t\t    <td style='background-color: #F2F2F2;font-weight: bold;'>联系传真</td>\n" +
                                "\t\t\t    <td>"+result.fax+"</td>\n" +
                                "\t\t\t    <td style='background-color: #F2F2F2;font-weight: bold;'>备注</td>\n" +
                                "\t\t\t    <td>"+result.remark+"</td>\n" +
                                "\t\t\t  </tr>\n" +
                                "\t\t    </tbody>\n" +
                                "\t\t  </table>"
                        });
                    }
                });
            }else if(obj.event === 'update'){
                $.ajax({
                    url: "/orders/SelById",
                    data: {"id": data.id},
                    type: "GET",
                    success: function (result) {
                        layer.open({
                            type: 1 //Page 层类型
                            , area: ['600px', '327px']
                            , title: '需求计划'+result.id
                            , shade: 0.6 //遮罩透明度
                            , maxmin: true //允许全屏最小化
                            , anim: 0 //0-6的动画形式，-1不开启
                            , content: "    <form class=\"layui-form\" action=\"\" id=\"fromOrd\">\n" +
                                "        <input type=\"hidden\" id=\"id\" value="+result.id+">\n" +
                                "        <div class=\"layui-form-item\">\n" +
                                "            <label class=\"layui-form-label\">物资编码</label>\n" +
                                "            <div class=\"layui-input-block\">\n" +
                                "                <input value="+result.materialCode+" id=\"materialCode\" type=\"text\" name=\"title\" lay-verify=\"title\" readonly=\"readonly\"  autocomplete=\"off\" class=\"layui-input\">\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class=\"layui-form-item\">\n" +
                                "            <label class=\"layui-form-label\">物资名称</label>\n" +
                                "            <div class=\"layui-input-block\">\n" +
                                "                <input value="+result.materialName+" id=\"materialName\" type=\"text\" name=\"title\" lay-verify=\"title\" readonly=\"readonly\"  autocomplete=\"off\" class=\"layui-input\">\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class=\"layui-form-item\">\n" +
                                "            <label class=\"layui-form-label\">数量</label>\n" +
                                "            <div class=\"layui-input-block\">\n" +
                                "                <input type=\"text\" id=\"amount\" name=\"title\" lay-verify=\"title\" autocomplete=\"off\" placeholder=\"请输入数量\" class=\"layui-input\">\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class=\"layui-form-item\">\n" +
                                "            <label class=\"layui-form-label\">计量单位</label>\n" +
                                "            <div class=\"layui-input-block\">\n" +
                                "                <input id=\"measureUnit\" type=\"text\" name=\"title\" lay-verify=\"title\" readonly=\"readonly\"  autocomplete=\"off\" class=\"layui-input\">\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class=\"layui-form-item\">\n" +
                                "            <label class=\"layui-form-label\">预单价(元)</label>\n" +
                                "            <div class=\"layui-input-block\">\n" +
                                "                <input type=\"text\" id=\"unitPrice\" name=\"title\" lay-verify=\"title\" autocomplete=\"off\" placeholder=\"请输入预单价\" class=\"layui-input\">\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class=\"layui-form-item\">\n" +
                                "            <label class=\"layui-form-label\">交货期</label>\n" +
                                "            <div class=\"layui-input-block\">\n" +
                                "                <input type=\"date\" id=\"startDate\" name=\"title\" lay-verify=\"title\" autocomplete=\"off\" placeholder=\"请输入交货期\" class=\"layui-input\">\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class=\"layui-form-item\">\n" +
                                "            <label class=\"layui-form-label\">备注</label>\n" +
                                "            <div class=\"layui-input-block\">\n" +
                                "                <input type=\"text\" id=\"remark\" name=\"title\" lay-verify=\"title\" autocomplete=\"off\" placeholder=\"请输入备注\" class=\"layui-input\">\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "        <div class=\"layui-form-item\">\n" +
                                "            <div class=\"layui-input-block\">\n" +
                                "                <button type=\"reset\" onclick=\"Qux()\" class=\"layui-btn layui-btn-primary\">取消</button>\n" +
                                "                <button type=\"button\" onclick=\"BaoCun()\" class=\"layui-btn\" lay-submit=\"\" lay-filter=\"demo1\">保存</button>\n" +
                                "            </div>\n" +
                                "        </div>\n" +
                                "    </form>"
                        });
                        $("#measureUnit").val(result.measureUnit);
                        $("#amount").val(result.amount);
                        if(result.unitPrice!=0){
                            $("#unitPrice").val(result.unitPrice);
                        }
                        $("#remark").val(result.remark);
                        $("#startDate").val(result.startDate);
                    }
                });
            }
        });
    });
    function Qux(){
        layer.closeAll();
    }
    function BaoCun(){
        let id=$("#id").val();
        let amount=$.trim($("#amount").val());
        let unitPrice=$.trim($("#unitPrice").val());
        let startDate=$.trim($("#startDate").val());
        let remark=$.trim($("#remark").val());
        if(amount==null||unitPrice==null||startDate==null||amount==''||unitPrice==''||startDate==''){
            alert("未填写!")
        }else{
            $.ajax({
                url: "/orders/Update",
                data:{
                    "id":id,
                    "amount":amount,
                    "unitPrice":unitPrice,
                    "startDate":startDate,
                    "remark":remark,
                },
                type: "POST",
                success: function (result) {
                    if($.trim(result)=="true"){
                        layer.alert("保存成功!");
                        $(".layui-laypage-btn")[0].click();
                        layer.closeAll();
                    }
                }
            });
        }
    }
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#text'  //html中渲染table的id
            , url: '/orders/'   //后台获取数据集合的地址
            , cellMinWidth: 80
            ,toolbar: '#toolbarDemo'
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false//不显示首页
                , last: false //不显示尾页

            }, cols: [
                [
                    //表单显示的title以及返回的需要显示的数据，field值与获取集合中的类的字段名一致。
                    {field: 'id', width: 178, title: '序号', align: 'center'}
                    , {field: 'materialCode', width: 178, title: '物资编码', align: 'center'}
                    , {field: 'materialName', width: 278, title: '物资名称', align: 'center'}
                    , {field: 'amount', width: 178, title: '数量', align: 'center'}
                    , {field: 'type', width: 178, title: '采购类型', align: 'center'}
                    , {field: 'progress', width: 178, title: '采购进度', align: 'center'}
                    , {fixed: 'right', width: 220, title: '操作', toolbar: "#button", align: 'center'}
                ]
            ], id: 'tableAll'
        });

    });

    function buttonSS() {
        var table = layui.table;
        table.reload('tableAll', {
            method: 'post',
            where: {
                materialCode: $.trim($('#materialCode').val()),
                materialName: $.trim($('#materialName').val()),
                progress: $.trim($('#progress').val())
            },
            page: {
                curr: 1
            }
        });
    };
</script>
</html>